<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>3D图片墙</title>
    <!-- 载入同目录下的CSS样式文件 -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 3D矩形 -->
    <div id="box">
      <!-- 前视图 -->
      <div class="front"></div>
      <!-- 前视图 -->
      <div class="front"></div>
      <!-- 后视图 -->
      <div class="back"></div>
      <!-- 顶部视图 -->
      <div class="top"></div>
      <!-- 底部视图 -->
      <div class="bottom"></div>
      <!-- 左视图 -->
      <div class="left"></div>
      <!-- 右视图 -->
      <div class="right"></div>
    </div>
    <script>
      var oBox = document.querySelector("#box");
      var y = -60;
      var x = 45;
      oBox.onmousedown = function(ev) {
        var oEvent = ev || event;
        var disX = oEvent.clientX - y;
        var disY = oEvent.clientY - x;
        document.onmousemove = function(ev) {
          var oEvent = ev || event;
          x = oEvent.clientY - disY;
          y = oEvent.clientX - disX;
          oBox.style.transform =
            "perspective(800px) rotateX(" + x + "deg) rotateY(" + y + "deg)";
        };
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    </script>
  </body>
</html>
